import type { Directive } from 'vue'

/** 懒加载指令 */
export const lazy: Directive<HTMLImageElement, string> = async (el, binding) => {
  const loading = await import('@/assets/svg/loading.svg')

  el.src = loading.default
  const observer = new IntersectionObserver((enr) => {
    console.log(enr[0].isIntersecting)
    console.log(enr[0].intersectionRatio > 0)
    console.log('-----------')
    if (enr[0].isIntersecting) {
      setTimeout(() => {
        el.src = binding.value
        observer.unobserve(el)
      }, 1000)
    }
  })

  observer.observe(el)
}

export default lazy
